<!-- 门店选择弹出窗 -->
<template>
	<div>
		<el-dialog title="文件列表" v-model="state.isShowDialog"  center class="borderRadius10" width="1180">
			<div class="cropper-warp">
				<el-table :data="state.goodsTableData" style="width: 100%;">
					<el-table-column prop="id" label="排序" width="80" >
						<template #default="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
                    <el-table-column prop="name" label="文件名称" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.materialName }}</span>
						</template>
					</el-table-column>
                    <el-table-column prop="imgUrl" label="视频封面" width="120"  show-overflow-tooltip>
						<template #default="scope">
							<span v-if="scope.row.materialImgUrl == '-'">-</span>
							<el-image v-else style="width:56px;height: 32px;" :src="scope.row.materialImgUrl" fit="cover" />
						</template>
					</el-table-column>
                    <el-table-column prop="materialSize" label="视频大小" width="120" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.materialSize }}</span>
						</template>
					</el-table-column>
                    <el-table-column prop="materialFormat" label="视频格式" width="120" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.materialFormat }}</span>
						</template>
					</el-table-column>
                    <el-table-column prop="materialDuration" label="视频时长" width="120" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.materialDuration }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="materialUrl" label="视频链接1" width="120">
						<template #default="scope">
							<span v-if="scope.row.materialUrl == ''">
								<el-button text type="primary" @click="addVideo('video', 0 ,scope.$index)">
									添加视频
								</el-button>
							</span>
							<span v-else @click="lookFile(scope.row)">
								<el-image style="width:56px;height: 32px;" :src="scope.row.materialImgUrl" fit="cover" />
							</span>
						</template>
					</el-table-column>
                    <el-table-column prop="title" label="操作" width="120">
						<template #default="scope">
							<el-button text type="primary" @click="delItem(scope.$index)">
								移除
							</el-button>
						</template>
					</el-table-column>
                </el-table>
				<el-button class="mt20" style="width: 100%" @click="addFileList">
					<el-icon> <ele-Add /> </el-icon> 新增文件
				</el-button>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel"  >取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 认</el-button>
				</span>
			</template>
		</el-dialog>
		<xgPlayVideo ref="xgPlayVideoRef" />
		<AddInformation ref="addInformationRef" @selectFun="selectFun" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
const xgPlayVideo = defineAsyncComponent(() => import('/@/components/information/xgPlayVideo.vue'))
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'  ))
const emit = defineEmits(['selectItemFun'])
const addInformationRef = ref()
const xgPlayVideoRef = ref();
// 定义变量内容
const state = reactive({
    loading: false,
	isShowDialog: false,
	addFileType: '',
	useIndex: 0,
    title:'',
	cropperImgBase64: '',
    param: {
		type : 1,
		keyWord: "",
		pageNum: 1,
		pageSize: 10,  
	},
	query:{
		searchType: [
			{ value: 1, label: 'SPU查询' },
			{ value: 1, label: 'SKU查询' }
		]
	},
    total: 0,
    goodsTableData:[] as Array<any>,
	type:'',
});
// 打开弹窗
const openDialog = ( type: string, data?: any) => {
	state.type = type;
	state.goodsTableData = data;
	state.isShowDialog = true;
};

// 音视频文件新增
const addFileList = () => {
	state.goodsTableData.push({
		materialId:null,
		materialName:'-',
		materialType:'-',
		materialImgUrl:'-',
		materialSize:'-',
		materialFormat:'-',
		materialDuration:'-',
		materialUrl:''
	})
}

// 图片选中
const addVideo = (type: string, isArr: number, index?: number) => {
	state.addFileType = type;
	if(index != undefined){
		state.useIndex = index;
	}
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any,fileListData :any) => {
	console.log(JSON.stringify(fileListData))
	state.goodsTableData[state.useIndex].materialId = 1;
	state.goodsTableData[state.useIndex].materialName = fileListData[0].filename;
	state.goodsTableData[state.useIndex].materialType = fileListData[0].storageType; //素材类型
	state.goodsTableData[state.useIndex].materialImgUrl = fileListData[0].url;
	state.goodsTableData[state.useIndex].materialSize = fileListData[0].filesize; //文件大小
	state.goodsTableData[state.useIndex].materialFormat = fileListData[0].mimetype; //素材格式
	state.goodsTableData[state.useIndex].materialDuration = fileListData[0].videoLength; //素材时长
	state.goodsTableData[state.useIndex].materialUrl = fileListData[0].videoCover; //素材链接
}

// 文件查看
const lookFile = async (item: any) => {
	console.log(JSON.stringify(item));
	if(item.materialType == 1){
		xgPlayVideoRef.value.openDialog(item.materialUrl)
	}
}

const delItem = (index: number) => {
	console.log(index)
}

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () =>{
	console.log(state.goodsTableData)
	emit('selectItemFun', state.type,state.goodsTableData);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
